<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>交流互动 - 学习资源平台</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/navbar.css}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/forumlist.css}">
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">云学堂</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/resource/list}">学习资源</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/assignment/list}">作业与考试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" th:href="@{/forum/list}">交流互动</a>
                    </li>
                    <li class="nav-item" th:if="${session.identity=='superAdmin' || session.identity=='ordinaryAdmin'}">
                        <a class="nav-link" th:href="@{/admin/index}">管理中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/user/digital}">个人中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/user/logout}">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2>论坛交流</h2>
                <a th:href="@{/forum/publish}" class="btn btn-primary">发表帖子</a>
            </div>

            <!-- 置顶帖子 -->
            <div th:if="${topPosts != null and !topPosts.isEmpty()}" class="card mb-4">
                <div class="card-header bg-warning text-white">
                    <strong>置顶帖子</strong>
                </div>
                <div class="card-body">
                    <div th:each="post : ${topPosts}" class="mb-2">
                        <span class="badge badge-warning">置顶</span>
                        <a th:href="@{'/forum/post/' + ${post.id}}" th:text="${post.title}" class="text-dark">帖子标题</a>
                        <span class="text-muted float-right">
                            <i class="far fa-eye"></i> <span th:text="${post.viewCount}">0</span>
                            <i class="far fa-comment ml-2"></i> <span th:text="${post.replyCount}">0</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 版块筛选 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/forum/list}" method="get" class="form-inline">
                        <div class="form-group mr-3">
                            <label for="categoryId" class="mr-2">版块:</label>
                            <select class="form-control" id="categoryId" name="categoryId" onchange="this.form.submit()">
                                <option value="">全部版块</option>
                                <option th:each="category : ${categoryList}" th:value="${category.id}"
                                        th:text="${category.name}"
                                        th:selected="${categoryId != null and categoryId == category.id}"></option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 帖子列表 -->
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>帖子标题</th>
                                    <th>版块</th>
                                    <th>作者</th>
                                    <th>浏览/回复</th>
                                    <th>最后回复</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="post : ${forumList}">
                                    <td>
                                        <a th:href="@{'/forum/post/' + ${post.id}}" th:text="${post.title}">帖子标题</a>
                                        <span th:if="${post.isTop == 1}" class="badge badge-warning">顶</span>
                                        <span th:if="${post.isElite == 1}" class="badge badge-success">精</span>
                                    </td>
                                    <td>
                                        <span th:if="${post.categoryId != null}">
                                            <span th:each="category : ${categoryList}" th:if="${category.id == post.categoryId}" th:text="${category.name}">版块名称</span>
                                        </span>
                                    </td>
                                    <td>
                                        <span th:if="${post.authorId != null}" th:text="${post.authorId}">作者ID</span>
                                    </td>
                                    <td>
                                        浏览:<span th:text="${post.viewCount}">0</span> 
                                        回复:<span th:text="${post.replyCount}">0</span>
                                    </td>
                                    <td th:text="${#temporals.format(post.lastReplyTime, 'yyyy-MM-dd HH:mm')}">最后回复时间</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${page.current <= 1} ? 'disabled'">
                                <a class="page-link" 
                                   th:href="@{/forum/list(page=${page.current - 1}, size=${page.size}, categoryId=${categoryId})}">上一页</a>
                            </li>
                            
                            <li class="page-item" th:each="i : ${#numbers.sequence(1, page.pages)}" 
                                th:classappend="${i == page.current} ? 'active'">
                                <a class="page-link" 
                                   th:href="@{/forum/list(page=${i}, size=${page.size}, categoryId=${categoryId})}" 
                                   th:text="${i}">1</a>
                            </li>
                            
                            <li class="page-item" th:classappend="${page.current >= page.pages} ? 'disabled'">
                                <a class="page-link" 
                                   th:href="@{/forum/list(page=${page.current + 1}, size=${page.size}, categoryId=${categoryId})}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>